<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
{% block sw_product_variants_overview %}
<div class="sw-product-variants-overview">

    {% block sw_product_variants_overview_option_list_toolbar %}
    <div class="sw-configuration-option-list__toolbar">
        {% block sw_product_variants_overview_option_list_toolbar_container %}
        <sw-container
            columns="1fr minmax(min-content, max-content) minmax(min-content, 180px) minmax(min-content, 180px)"
            gap="0 10px"
        >

            {% block sw_product_variants_overview_option_list_toolbar_container_search_field %}
            <sw-simple-search-field
                v-model:value="term"
                variant="form"
                size="small"
                @search-term-change="onSearch"
            />
            {% endblock %}

            {% block sw_product_variants_overview_option_list_toolbar_container_filter_list %}
            <div class="sw-product-variants-overview__filter-list-button">

                {% block sw_product_variants_overview_option_list_toolbar_container_filter_list_button %}
                <mt-button
                    variant="secondary"
                    @click="filterWindowOpen = !filterWindowOpen"
                >
                    {{ $tc('sw-product.variations.generatedFilterList') }}
                    <mt-icon
                        name="regular-filter"
                        size="12px"
                    />
                </mt-button>
                {% endblock %}

                {% block sw_product_variants_overview_option_list_toolbar_container_filter_context_menu %}
                <sw-context-menu v-show="filterWindowOpen">
                    <sw-container
                        columns="1fr"
                        gap="5px"
                    >

                        {% block sw_product_variants_overview_option_list_toolbar_container_filter_tree %}
                        <sw-tree
                            v-show="filterOptions.length"
                            :sortable="false"
                            :items="filterOptions"
                            :searchable="false"
                            :disable-context-menu="true"
                            bind-items-to-folder
                        >
                            <template
                                #items="{ treeItems, sortable, draggedItem, disableContextMenu, onChangeRoute, checkItem }"
                            >
                                <sw-tree-item
                                    v-for="(item, index) in treeItems"
                                    :key="item.id"
                                    :sortable="false"
                                    :item="item"
                                    :disable-context-menu="true"
                                    @check-item="filterOptionChecked"
                                />
                            </template>
                        </sw-tree>
                        {% endblock %}

                        {% block sw_product_variants_overview_option_list_toolbar_container_filter_buttons %}
                        <div class="sw-product-variants-overview__filter-buttons">
                            {% block sw_product_variants_overview_option_list_toolbar_container_button_filter_reset %}
                            <mt-button
                                variant="secondary"
                                @click="resetFilterOptions()"
                            >
                                {{ $tc('sw-product.variations.overview.filterReset') }}
                            </mt-button>
                            {% endblock %}

                            {% block sw_product_variants_overview_option_list_toolbar_container_button_update_list %}
                            <mt-button
                                variant="primary"
                                @click="getList()"
                            >
                                {{ $tc('sw-product.variations.overview.filter') }}
                            </mt-button>
                            {% endblock %}
                        </div>
                        {% endblock %}

                    </sw-container>
                </sw-context-menu>
                {% endblock %}
            </div>
            {% endblock %}

            {% block sw_product_variants_overview_option_list_toolbar_buttons %}
            <mt-button
                v-tooltip="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    disabled: acl.can('product.creator'),
                    showOnDisabledElements: true
                }"
                :disabled="!acl.can('product.creator')"
                class="sw-product-variants__generate-action"
                variant="primary"
                @click="$emit('generator-open')"
            >
                {{ $tc('sw-product.variations.overview.generateVariants') }}
            </mt-button>

            <mt-button
                class="sw-product-variants__configure-storefront-action"
                :disabled="!acl.can('product.editor')"
                variant="primary"
                @click="$emit('delivery-open')"
            >
                {{ $tc('sw-product.variations.overview.storefrontDelivery') }}
            </mt-button>
            {% endblock %}

        </sw-container>
        {% endblock %}

    </div>
    {% endblock %}

    {% block sw_product_variants_overview_data_grid %}
    <sw-data-grid
        ref="variantGrid"
        class="sw-product-variants-overview__data-grid"
        :data-source="variants"
        :columns="variantColumns"
        :show-settings="true"
        :show-selection="acl.can('product.deleter')"
        :sort-by="sortBy"
        :sort-direction="sortDirection"
        :is-loading="isLoading"
        :skeleton-item-amount="limit"
        :allow-inline-edit="acl.can('product.editor')"
        identifier="product-variants-overview"
        @column-sort="onSortColumn"
        @inline-edit-save="onInlineEditSave"
        @inline-edit-cancel="onInlineEditCancel"
    >

        {% block sw_product_variants_overview_data_grid_column_name %}
        <template
            #column-name="{ item }"
        >
            <template v-if="item.options">
                <router-link
                    :to="{ name: 'sw.product.detail.base', params: { id: item.id } }"
                    class="sw-product-variants-overview__variation-link"
                    @click="onOptionEdit(item)"
                >

                    <mt-icon name="regular-link-xs" />

                    <span
                        v-for="(singleVariation, index) in item.options"
                        :key="index"
                        class="sw-product-variants-overview__single-variation"
                    >
                        {{ singleVariation.translated.name }}
                    </span>
                </router-link>
            </template>

            <sw-label
                v-if="variantIsDigital(item)"
                class="sw-product-variants-overview__digital-indicator"
            >
                {{ $tc('sw-product.variations.generatedListColumnContentProductState.is-download') }}
            </sw-label>
        </template>
        {% endblock %}

        {% block sw_product_variants_overview_data_grid_column_price %}
        <template
            v-for="currency in currencies"
            :key="`switch-${currency.isoCode}`"
            #[`column-price.${currency.id}.net`]="{ item, compact, isInlineEdit }"
        >

            {% block sw_product_variants_overview_data_grid_column_price_inline_edit %}
            <template v-if="isInlineEdit">
                {% block sw_product_variants_overview_data_grid_column_price_inline_edit_inherit %}
                <sw-inheritance-switch
                    :is-inherited="isPriceFieldInherited(item, currency)"
                    class="sw-product-detail-context-prices__inherited-icon"
                    @inheritance-restore="onInheritanceRestore(item, currency)"
                    @inheritance-remove="onInheritanceRemove(item, currency)"
                />
                {% endblock %}

                {% block sw_product_variants_overview_data_grid_column_price_inline_edit_price_field %}
                <sw-price-field
                    :value="item.price ? item.price : []"
                    :default-price="getDefaultPriceForVariant(item, currency)"
                    :tax-rate="productTaxRate"
                    :label="false"
                    :compact="compact"
                    enable-inheritance
                    :currency="currency"
                />
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_product_variants_overview_data_grid_column_price_preview %}
            <template v-else>
                {% block sw_product_variants_overview_data_grid_column_price_preview_inherit %}
                <sw-inheritance-switch
                    :key="`else-switch-${currency.isoCode}`"
                    :is-inherited="isPriceFieldInherited(item, currency)"
                    class="sw-product-detail-context-prices__inherited-icon"
                    :disabled="true"
                />
                {% endblock %}

                {% block sw_product_variants_overview_data_grid_column_price_preview_price_field %}
                <sw-price-preview
                    :key="`else-price-field-${currency.isoCode}`"
                    :value="item.price ? item.price : []"
                    :default-price="getDefaultPriceForVariant(item, currency)"
                    :tax-rate="productTaxRate"
                    :currency="currency"
                />
                {% endblock %}
            </template>
            {% endblock %}

        </template>
        {% endblock %}

        {% block sw_product_variants_overview_data_grid_column_stock %}
        <template
            #column-stock="{ item, isInlineEdit, compact }"
        >
            {% block sw_product_variants_overview_data_grid_column_stock_inline_edit_field %}
            <mt-number-field
                v-if="isInlineEdit && (!variantIsDigital(item) || item.isCloseout === true)"
                v-model="item.stock"
                :size="compact ? 'small' : 'default'"
            />
            {% endblock %}

            {% block sw_product_variants_overview_data_grid_column_stock_preview %}
            <span v-else>
                {{ item.stock }}
            </span>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_product_variants_overview_data_grid_column_product_number %}
        <template
            #column-productNumber="{ item, isInlineEdit, compact }"
        >
            {% block sw_product_variants_overview_data_grid_column_product_number_inline_edit %}

            <mt-text-field
                v-if="isInlineEdit"
                v-model="item.productNumber"
                :size="compact ? 'small' : 'default'"
            />
            {% endblock %}

            {% block sw_product_variants_overview_data_grid_column_product_number_preview %}
            <span
                v-else
                class="sw-product-variants-overview_product-number"
            >
                {{ item.productNumber }}
            </span>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_product_variants_overview_data_grid_column_media %}
        <template #column-media="{ item, isInlineEdit, compact }">
            {% block sw_product_variants_overview_data_grid_column_media_inline_edit %}
            {% block sw_product_variants_overview_data_grid_column_media_inherit %}
            <sw-inheritance-switch
                :is-inherited="isMediaFieldInherited(item)"
                :disabled="!isInlineEdit"
                class="sw-product-variants-overview_media__inherited-icon"
                @inheritance-restore="onMediaInheritanceRestore(item, isInlineEdit)"
                @inheritance-remove="onMediaInheritanceRemove(item, isInlineEdit)"
            />
            {% endblock %}

            {% block sw_product_variants_overview_data_grid_column_media_content %}
            <sw-product-variants-media-upload
                :source="item"
                :upload-tag="item.id"
                :is-inherited="isMediaFieldInherited(item)"
                :disabled="isInlineEdit ? isMediaFieldInherited(item) : true"
                :parent-product="product"
            />
            {% endblock %}
            {% endblock %}
        </template>
        {% endblock %}

        <template #column-downloads="{item, isInlineEdit, compact}">
            <sw-upload-listener
                :upload-tag="item.productNumber"
                auto-upload
                @media-upload-finish="(event) => successfulUpload(event, item)"
            />

            <sw-media-compact-upload-v2
                v-if="productDownloadFolderId"
                :upload-tag="item.productNumber"
                :disabled="!isInlineEdit"
                private-filesystem
                allow-multi-select
                add-files-on-multiselect
                :disable-deletion-for-last-item="{
                    value: true,
                    helpText: $tc('sw-product.list.columnDownloadsTooltip')
                }"
                :source-multiselect="getDownloadsSource(item)"
                :target-folder-id="productDownloadFolderId"
                file-accept="*/*"
                @delete-item="(file) => removeFile(`${file.fileName}.${file.fileExtension}`, item)"
            />
        </template>

        {% block sw_product_variants_overview_data_grid_column_active %}
        <template
            #column-active="{ item, isInlineEdit }"
        >
            <template v-if="isInlineEdit">
                <sw-data-grid-column-boolean
                    v-model:value="item.active"
                    :is-inline-edit="isInlineEdit"
                    :disabled="isActiveFieldInherited(item)"
                />

                <sw-inheritance-switch
                    :is-inherited="isActiveFieldInherited(item)"
                    class="sw-product-variants-overview__active-inherited-icon"
                    @inheritance-restore="onActiveInheritanceRestore(item)"
                    @inheritance-remove="onActiveInheritanceRemove(item)"
                />
            </template>

            <template v-else>
                <mt-icon
                    v-if="item.active === true"
                    name="regular-checkmark-xs"
                    size="12px"
                    class="is--active"
                />
                <mt-icon
                    v-else-if="item.active === false"
                    name="regular-times-s"
                    size="10px"
                    class="is--inactive"
                />
                <mt-icon
                    v-else
                    key="inherit-icon"
                    name="regular-link-horizontal"
                    size="16px"
                />
            </template>
        </template>
        {% endblock %}

        {% block sw_product_variants_overview_actions %}
        <template
            #actions="{ item }"
        >
            {% block sw_product_variants_overview_actions_items %}
            <sw-context-menu-item
                v-tooltip="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    disabled: acl.can('product.editor'),
                    showOnDisabledElements: true
                }"
                :disabled="!acl.can('product.editor')"
                @click="onOptionEdit(item)"
            >
                {{ $tc('sw-product.variations.generatedListContextMenuEdit') }}
            </sw-context-menu-item>

            <sw-context-menu-item
                v-tooltip="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    disabled: acl.can('product.deleter'),
                    showOnDisabledElements: true
                }"
                variant="danger"
                :disabled="!acl.can('product.deleter')"
                @click="onVariationDelete(item)"
            >
                {{ $tc('sw-product.variations.generatedListContextMenuDelete') }}
            </sw-context-menu-item>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_product_variants_overview_pagination %}
        <template #pagination>
            <sw-pagination
                :page="page"
                :limit="limit"
                :total="total"
                :total-visible="7"
                @page-change="onPageChange"
            />
        </template>
        {% endblock %}

        {% block sw_product_variants_overview_bulk %}
        <template #bulk>
            {% block sw_product_variants_overview_bulk_edit %}
            <span
                v-if="acl.can('product.editor')"
                class="link link-primary"
                role="link"
                tabindex="0"
                @click="toggleBulkEditModal"
            >
                {{ $tc('global.default.bulkEdit') }}
            </span>
            {% endblock %}

            {% block sw_product_variants_overview_bulk_delete %}
            <span
                v-if="acl.can('product.deleter')"
                class="link link-danger sw-product-variants-overview__bulk-delete-action"
                role="link"
                tabindex="0"
                @click="onClickBulkDelete"
            >
                {{ $tc('global.default.delete') }}
            </span>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_product_variants_overview_bulk_edit_modal %}
        <template #bulk-modals="{ selection }">
            <sw-bulk-edit-modal
                v-if="showBulkEditModal"
                class="sw-product-variants-overview__bulk-edit-modal"
                :selection="selection"
                :bulk-grid-edit-columns="variantColumns"
                @edit-items="onEditItems"
                @modal-close="toggleBulkEditModal"
            >
                {% block sw_product_variants_overview_bulk_edit_modal_column_name %}
                <template #column-name="{ item }">
                    <template v-if="item.options">
                        <router-link
                            class="sw-product-variants-overview__variation-link"
                            :to="{ name: 'sw.product.detail.base', params: { id: item.id } }"
                            @click="onOptionEdit(item)"
                        >
                            <mt-icon
                                class="sw-product-variants-overview__variation-link-icon"
                                name="regular-link-xs"
                            />
                            <span
                                v-for="(singleVariation, index) in item.options"
                                :key="index"
                                class="sw-product-variants-overview__variation-link-name"
                            >
                                {{ singleVariation.translated.name }}
                            </span>
                        </router-link>
                    </template>
                </template>
                {% endblock %}

                {% block sw_product_variants_overview_bulk_edit_modal_column_price %}
                <template
                    v-for="currency in currencies"
                    :key="currency.id"
                    #[`column-price.${currency.id}.net`]="{ item }"
                >
                    <sw-inheritance-switch
                        :key="`else-switch-${currency.isoCode}`"
                        :is-inherited="isPriceFieldInherited(item, currency)"
                        disabled
                    />
                    <sw-price-preview
                        :key="`else-price-field-${currency.isoCode}`"
                        :value="item.price ? item.price : []"
                        :default-price="getDefaultPriceForVariant(item, currency)"
                        :tax-rate="productTaxRate"
                        :currency="currency"
                    />
                </template>
                {% endblock %}

                {% block sw_product_variants_overview_bulk_edit_modal_column_media %}
                <template #column-media="{ item }">
                    <sw-inheritance-switch
                        class="sw-product-variants-overview_media__inherited-icon"
                        :is-inherited="isMediaFieldInherited(item)"
                        disabled
                    />
                    <sw-product-variants-media-upload
                        :source="item"
                        :upload-tag="item.id"
                        :is-inherited="isMediaFieldInherited(item)"
                        :parent-product="product"
                        disabled
                    />
                </template>
                {% endblock %}

                <template #column-downloads="{item, isInlineEdit, compact}">
                    <sw-upload-listener
                        :upload-tag="item.productNumber"
                        auto-upload
                        @media-upload-finish="(event) => successfulUpload(event, item)"
                    />

                    <sw-media-compact-upload-v2
                        v-if="productDownloadFolderId"
                        :upload-tag="item.productNumber"
                        :disabled="!isInlineEdit"
                        private-filesystem
                        allow-multi-select
                        :disable-deletion-for-last-item="{
                            value: true,
                            helpText: $tc('sw-product.list.columnDownloadsTooltip')
                        }"
                        :add-files-on-multiselect="true"
                        :source-multiselect="getDownloadsSource(item)"
                        :target-folder-id="productDownloadFolderId"
                        file-accept="*/*"
                        @delete-item="(file) => removeFile(`${file.fileName}.${file.fileExtension}`, item)"
                    />
                </template>

                {% block sw_product_variants_overview_bulk_edit_modal_column_active %}
                <template #column-active="{ item }">
                    <mt-icon
                        v-if="item.active === true"
                        class="is--active"
                        name="regular-checkmark-xs"
                        size="16px"
                    />
                    <mt-icon
                        v-else-if="item.active === false"
                        class="is--inactive"
                        name="regular-times-s"
                        size="16px"
                    />
                    <mt-icon
                        v-else
                        key="inherit-icon"
                        name="regular-link-horizontal"
                        size="16"
                    />
                </template>
                {% endblock %}
            </sw-bulk-edit-modal>
        </template>
        {% endblock %}

    </sw-data-grid>
    {% endblock %}

    {% block sw_product_variants_overview_data_grid_action_modals %}
    <sw-modal
        v-if="showDeleteModal"
        class="sw-product-variants-overview__delete-modal"
        :title="$tc('global.default.warning')"
        variant="small"
        @modal-close="onCloseDeleteModal"
    >

        <p
            class="sw-product-variants-overview__modal--confirm-delete-text"
        >
            {{ toBeDeletedVariantIds.length > 1 ? $tc('sw-product.variations.generatedListDeleteModalMessagePlural') : $tc('sw-product.variations.generatedListDeleteModalMessage') }}
        </p>

        <template #modal-footer>
            {% block sw_product_variants_overview_data_grid_action_modals_buttons %}
            <mt-button
                class="sw-product-variants-overview__modal--cancel-button"
                size="small"
                :disabled="modalLoading"
                variant="secondary"
                @click="onCloseDeleteModal"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            <mt-button
                variant="critical"
                size="small"
                :disabled="modalLoading"
                @click="onConfirmDelete"
            >
                {{ $tc('sw-product.variations.generatedListDeleteModalButtonDelete') }}
            </mt-button>
            {% endblock %}
        </template>
    </sw-modal>
    {% endblock %}
</div>
{% endblock %}
